<template>
	<view class="body">
		<h2>登陆</h2>
		<input class="uni-input" focus placeholder="输入用户ID" v-model="user.userId"/>
		<input class="uni-input" type="password" focus placeholder="输入用户密码" v-model="user.password"/>
		<view class="buttonBox">
			<view @click="submit()" >
				<zy-button class="button" :content="buttonContent1"></zy-button>
			</view>
			<view @click="toRegister()">
				<zy-button class="button" :content="buttonContent2"></zy-button>
			</view>
		</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="popup.type" :message="popup.message" :duration="popup.duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import button from '../components/zy-button.vue'
	export default{
		data(){
			return {
				popup:{
					type:'success',
					message:'成功',
					duration:2000
				},
				user:{
					userId:"",
					password:""
				},
				buttonContent1:"登陆",
				buttonContent2:"注册"
			}
		},
		methods:{
			submit(){
				uni.request({
					url:this.config.serverUrl+'/signIn/login',
					method:'POST',
					data:this.user,
				}).then(res=>{
					if(res[1].data.status){
						uni.setStorage({
							key:'libilibiUserKey',
							data:{
								userId:this.user.userId,
								token:res[1].data.data.token
							}
						})
						this.popup.type = 'success';
						this.popup.message = res[1].data.content;
						this.$refs.popup.open();
						setTimeout(()=>{
							uni.switchTab({
								url:'../index/index'
							})
						},2000);
					} else {
						this.popup.type = 'error';
						this.popup.message = res[1].data.content;
						this.$refs.popup.open();
						this.user.userId = '';
						this.user.password = '';
					}
				})
			},
			toRegister(){
				uni.navigateTo({
					url:'./register'
				})
			}
		},
		components:{
			'zy-button':button
		}
	}
</script>

<style lang="scss">
	.body{
		width:100%;
		height:100vh;
		background-color:rgba(0,0,0,0.75);
		>h2{
			color:white;
			text-align: center;
			
		}
		.button{
			width:100%;
			margin:5px auto;
		}
		.buttonBox{
			margin-top:30px;
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			width:80%;
			margin-left:10%;
			>view{
				width:45%;
			}
		}
		input{
			width:70%;
			margin:30px auto;
			border-bottom:1px solid white;
			color:white;
			font-size:26px;
			text-align: center;
		}
		
	}
</style>
